<!-- 分公司目标完成对比 -->
<template>
  <div class="dy-panel">
    <div class="dy-panel-main" style="width: 90vh">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
      <div class="dy-panel-content">
        <contentTitle :title="'分公司目标完成对比'"></contentTitle>
        <div class="dy-content-md">
          <div class="dy-md-x6" v-for="(row,index) in dataList">
            <div class="dy-md-left">
              {{row.title}}
            </div>
            <div class="dy-md-right">
              <div class="dy-md-p-small">
                <div class="dy-md-p-small-left">目标 {{row.mb}}</div>
                <div class="dy-md-p-small-right">完成 {{row.wc}}</div>
              </div>
              <div class="dy-md-p-chart">
                <div class="dy-md-p-chart-bg">
                  <div class="dy-md-p-chart-line" :style="{width:row.bl}"></div>
                </div>
                <div class="dy-md-p-chart-rate">{{row.bl}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, onMounted, ref} from "vue";
import ContentTitle from "../contentTitle.vue";
import {ajaxRequest} from "../../../api/code.js";
import yzxs from '../../../assets/img/sale_more/service-station.png'
import jqxs from '../../../assets/img/sale_more/aerate.png'
import cdxs from '../../../assets/img/sale_more/charge.png'
import scxs from '../../../assets/img/sale_more/supermarket.png'
import cyxs from '../../../assets/img/sale_more/catering.png'
import fkxs from '../../../assets/img/sale_more/guest-room.png'
import wyshxs from '../../../assets/img/sale_more/Property.png'

const emit = defineEmits(['closeChild']);
const closeCurrent = function (){
  emit('closeChild')
}
const dataList = ref([]);
getDataList();
/**
 * 获取服务区档案信息
 */
async function getDataList() {

  dataList.value = [{
      title: '秦皇岛分公司',
      mb: '252000',
      wc: '81093.60',
      bl: '32.18%'
    },{
    title: '廊坊分公司',
    mb: '189000',
    wc: '68852.70',
    bl: '36.43%'
  },{
    title: '唐山分公司',
    mb: '212600',
    wc: '64885.52',
    bl: '30.52%'
  },{
    title: '石家庄分公司',
    mb: '352100',
    wc: '122636.43',
    bl: '34.83%'
  },{
    title: '衡水分公司',
    mb: '287900',
    wc: '105169.87',
    bl: '36.53%'
  },{
    title: '邢台分公司',
    mb: '389210',
    wc: '152803.85',
    bl: '39.26%'
  },{
    title: '承德分公司',
    mb: '215040',
    wc: '82811.90',
    bl: '38.51%'
  },{
    title: '沧州分公司',
    mb: '237450',
    wc: '75556.59',
    bl: '31.82%'
  },{
    title: '张家口分公司',
    mb: '322450',
    wc: '120144.87',
    bl: '37.26%'
  },{
    title: '大名分公司',
    mb: '289000',
    wc: '98780.20',
    bl: '34.18%'
  },{
    title: '保定分公司',
    mb: '356392',
    wc: '132720.38',
    bl: '37.24%'
  },];
}
</script>

<style scoped>
.dy-panel-main{
  padding:2.5vh;
}

.dy-content-md{
  display: flex;
  flex-wrap: wrap;
}

.dy-md-x6{
  width: 50%;
  display: flex;
  font-size: 14px;
  margin-bottom: 25px;
  margin-top:5px;
  .dy-md-left{
    padding-left:20px;
    padding-top:20px;
    color: #00FFFF;
    display: flex;
    flex-wrap: wrap;
    width:180px;
    align-content: celnter;
  }
  .dy-md-right{
    padding-left: 10px;
    .dy-md-p-small{
      display: flex;
      font-size: 10px;
      margin-bottom: 5px;
      .dy-md-p-small-right{
        padding-left: 30px;
      }
    }
    .dy-md-p-chart{
      display: flex;
      .dy-md-p-chart-bg{
        border: 1px solid #095c9e;
        width: 180px;
      }
      .dy-md-p-chart-line{
        margin: 1px 0;
        background: #095c9e;
        height:85%;
      }
      .dy-md-p-chart-rate{
        padding-left: 5px;
        color: #00FFFF;
      }

    }
  }

}

</style>
